<template>
	<div class="mode-box">
		<div>
			<!-- 返回按钮 -->
			<div class="fanhui-box">
				<div @click="$router.push('/work')">
					<i class="iconfont icon-icon_fanhui"></i>
					返回
				</div>
			</div>
			<div class="box scroll" ref="scrollBoxRef">
				<div class="sub-box" ref="scrollSubRef" :class="{ 'scroll-bar-visible': scrollBarVisible }">
					<slot></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { useRootStore } from '@v/store';

const store = useRootStore();

onMounted(() => {
	isScrollBarVisible();
});

onBeforeUnmount(() => {
	store.setDrawer_showComponent(undefined);
	store.setDrawer_isShow(false);

	window.removeEventListener('resize', resizeLiatener);
});

const resizeLiatener = () => isScrollBarVisible();

window.addEventListener('resize', resizeLiatener);

const scrollBoxRef = ref<HTMLDivElement>();
const scrollSubRef = ref<HTMLDivElement>();

const scrollBarVisible = ref(false);
// 判断是否出现了滚动条
function isScrollBarVisible() {
	if (scrollBoxRef.value) {
		scrollBarVisible.value = scrollBoxRef.value.scrollHeight > scrollBoxRef.value.clientHeight;
	}
}
</script>

<style scoped lang="scss">
.mode-box {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--aside-bg-color);
	box-sizing: border-box;

	& > div {
		width: calc(100% - 10px);
		height: calc(100% - 20px);
		margin: 10px;
		margin-right: 0%;
		.fanhui-box {
			padding-bottom: 10px;
			border-bottom: 1px solid var(--border-color-4);
			& > div {
				display: inline-block;
				padding: 2px 10px 2px 4px;
				font-size: 14px;
				background-color: var(--mouse-hover-bg-color-1);
				border-radius: 4px;
				cursor: pointer;
				&:hover {
					background-color: var(--mouse-hover-bg-color-2);
					color: #409eff;
				}
			}
		}
		.box {
			margin-top: 10px;
			height: calc(100% - 40px);
			.sub-box {
				width: calc(100% - 20px);
				margin-right: 0;
				&.scroll-bar-visible {
					// 当出现滚动条出现改变宽度
					width: calc(100% - 13.5px);
				}
			}
		}
	}
}
</style>
